<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-12 17:39:44
 * @LastEditTime: 2022-01-08 15:45:56
 * @LastEditors: Liz.Zheng
 * @Description: 项目详情
 * @Motto: Write the code. Change the world.
-->

<template>
  <a-drawer
    title="项目详情"
    placement="right"
    :closable="true"
    :maskClosable="true"
    :visible="visible"
    :width="600"
    @close="handleClose"
    :body-style="{
      paddingBottom: '80px',
    }"
  >
    <!-- <a-tabs v-model:activeKey="activeTabKey" size="small"> -->
    <!-- <a-tab-pane :key="TAB_KEYS[0]" tab="基本信息"> -->
    <div class="text-title">基本信息</div>
    <a-descriptions title="" :column="2" bordered class="mt-10">
      <a-descriptions-item label="项目名称">{{
        detail.name
      }}</a-descriptions-item>
      <a-descriptions-item label="项目简称">{{
        detail.short_name
      }}</a-descriptions-item>
      <a-descriptions-item label="项目描述" :span="2">{{
        detail.describe || "无"
      }}</a-descriptions-item>
      <a-descriptions-item label="所属地区" :span="2">{{
        detail.district_txt
      }}</a-descriptions-item>
      <a-descriptions-item label="详细地址" :span="2">{{
        detail.address
      }}</a-descriptions-item>
      <a-descriptions-item label="管理面积（㎡）">{{
        detail.management_area
      }}</a-descriptions-item>
      <a-descriptions-item label="可招商面积（㎡）">{{
        detail.rentable_area
      }}</a-descriptions-item>
      <a-descriptions-item label="总房源数量（间）">{{
        detail.room_count
      }}</a-descriptions-item>
      <a-descriptions-item label="可招商房源数量（间）">{{
        detail.room_rentable_count
      }}</a-descriptions-item>
    </a-descriptions>
    <!-- </a-tab-pane> -->
    <!-- </a-tabs> -->

    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="handleClose">关闭</a-button>
      <a-button type="primary" @click.prevent="toEdit">去编辑</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
import { useRouter } from "vue-router";
import request from "../../../common/utils/request";

export default defineComponent({
  name: "ProjectDetail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    // 当前选中tab
    const TAB_KEYS = ["basic"];

    const activeTabKey = ref(TAB_KEYS[0]);
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        }
      }
    );

    const init = () => {
      getDetail();
    };

    const detail = ref({});
    const getDetail = () => {
      request
        .get("/village", "/project/manage/get", {
          id: props.id,
        })
        .then((res) => {
          detail.value = res.list;
        });
    };
    const handleClose = () => {
      context.emit("cancel");
    };
    const toEdit = () => {
      context.emit("edit", props.id);
    };
    return {
      TAB_KEYS,
      activeTabKey,
      detail,
      handleClose,
      toEdit,
    };
  },
});
</script>

<style></style>
